<template>
    <view class="pr-30 pl-30">
        <view style="height: 6rpx"></view>
        <view
            class="list br-24 mt-24 pl-30 pr-30 ft-28 pb-20 pt-20"
            v-for="item in list"
            :key="item.id"
            @click="goDetail(item)"
        >
            <view class="align-center"> 发票抬头：{{ item.invoiceTitle || '' }} </view>
            <view class="align-center mt-6"> 公司税号：{{ item.taxNo || '' }} </view>
            <view class="align-center mt-6">
                发票金额：
                <text class="c-m bold">￥</text>
                <text class="c-m bold ft-36">{{ item.amount || '' }}</text>
            </view>
            <view class="align-center mt-6">
                发票类型：{{ invoiceType[item.invoiceType] || '普通发票' }}
            </view>
            <view class="align-center mt-6">
                开票状态：<text :class="[getClass(item.status)]">
                    {{ status[item.status] || '' }}
                </text>
            </view>
            <view class="align-center mt-6"> 订单编号：{{ item.orderNo || '' }} </view>
        </view>
        <view style="height: 30rpx"></view>
    </view>
</template>

<script setup>
/**
 * @description 列表组件
 * @author yinzhi
 * @date 2025-05
 */
import { defineComponent } from 'vue'
defineComponent({
    name: 'List'
})
const props = defineProps({
    list: {
        type: Array,
        default: () => []
    }
})

const invoiceType = {
    1: '普通发票',
    2: '增值税专用发票'
}

const status = {
    0: '开票中',
    1: '开票成功',
    2: '开票失败',
    3: '取消申请'
}

// 不同状态的样式 等对接时需要更改
const getClass = status => {
    switch (status) {
        case 0:
            return 'c-start'
        case 1:
            return 'c-m'
        case 2:
            return 'c-error'
        case 3:
            return 't-9'
        default:
            return ''
    }
}

// 查看发票详情
const goDetail = data => {
    uni.navigateTo({
        url: `/pages/user/invoice-apply/index?orderNo=${data.orderNo}&type=detail`
    })
}
</script>

<style scoped lang="scss">
.list {
    background: $uni-bg-color;
    box-shadow: 0 0 16rpx 0 rgba($color: #000000, $alpha: 0.08);
    position: relative;
    .c-error {
        color: $uni-color-error;
    }
    .c-start {
        color: $uni-color-success;
    }
}
</style>
